<template>
  <div class="singer" ref="singer">
    <list-view @select="selectSinger" :data="singers" ref="list"></list-view>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getSingers} from '@/api/singers'
  import Singer from 'common/js/singer'
  import ListView from 'base/listview/listview'
  // 语法糖导入共享数据
  import {mapMutations} from 'vuex'
  import {mixinPlayList} from 'common/js/mixin'
  // import {commonParams} from 'api/config'

  // 热门
  const HOT_NAME = '热门'
  // 热门歌手10个
  const HOT_NAME_LEN = 10

  export default {
    mixins: [mixinPlayList],
    data () {
      return {
        singers: []
      }
    },
    created () {
      // 获取歌手数据
      this._getSingers()
    },
    methods: {
      // 处理在mini-player出现时的bottom不足问题
      handlePlayList (playlist) {
        const bottom = playlist.length > 0 ? '60px' : ''
        this.$refs.singer.style.bottom = bottom
        this.$refs.list.refresh()
      },
      // 点击歌手详细信息时
      // singer是子事件的item
      selectSinger (singer) {
        this.$router.push({
          path: `/singer/${singer.id}`
        })
        // 把歌手数据通过vuex共享
        this.setSinger(singer)
      },
      _getSingers () {
        // 请求QQ官网歌手数据
        getSingers().then((res) => {
          this.singers = this._nomalizeSingers(res.data.data.list)
        })
      },
      // 格式化获取到的歌手数据（因为获取到的数据排列很乱）
      _nomalizeSingers (list) {
        let map = {
          hot: {
            title: HOT_NAME,
            items: []
          }
        }
        list.forEach((item, index) => {
            // 遍历获取到的歌手数据，首先是hot分类
            if (index < HOT_NAME_LEN) {
              map.hot.items.push(new Singer({
                  id: item.Fsinger_mid,
                  name: item.Fsinger_name
                }
              ))
            }
            /// 然后是按字母表分类
            // key表示分类的那些字母
            const key = item.Findex
            // 如果没有改分类，就创建这个分类
            if (!map[key]) {
              map[key] = {
                title: key,
                items: []
              }
            }
            // 把改分类的歌手放进去
            map[key].items.push(new Singer({
                id: item.Fsinger_mid,
                name: item.Fsinger_name
              })
            )
          }
        )
        // 由于经过上面步骤得到的map不是按照‘热ABCDE...’排列的数组
        // 下面对map处理得到

        // 热
        let hot = []
        // 字母表
        let ret = []
        // 遍历map，把map分为上面“热”和“字母表”两类
        for (let key in map) {
          let val = map[key]
          if (val.title.match(/[A-Z]/)) {
            ret.push(val)
          } else {
            // 是否匹配"热"
            if (val.title === HOT_NAME) {
              hot.push(val)
            }
          }
        }
        // 由于上面得到的ret还不是字母表的顺序，
        // 所以还需要进行排序
        ret.sort((a, b) => {
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
        })
        return hot.concat(ret)
      },
      ...mapMutations({
        setSinger: 'SET_SINGER'
      })
    },
    components: {
      ListView
    }
  }
</script>

<style scoped lang="stylus">
  .singer
    position: fixed
    top: 88px
    bottom: 0
    width: 100%
</style>
